// 规格管理
<template>
  <div class="specif_box">
    <avue-crud
      :data="data"
      :option="option"
      v-model:search="search"
      v-model:page="page"
      @on-load="onLoad"
      @search-change="searchChange"
      @search-reset="resetChange"
      @refresh-change="refreshChange"
      @row-del="rowDel"
    >
      <template #menu="{ row, index, size }">
        <el-button
          type="danger"
          :size="size"
          icon="el-icon-edit"
          @click="rowEdit(row, index)"
          >编辑</el-button
        >
      </template>
      <template #menu-left="{ size }">
        <el-button type="primary" :size="size" @click="addbtn()"
          >+ 新增</el-button
        >
      </template>
    </avue-crud>
    <!-- 新增弹框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="title == '新增' ? '新增' : '编辑'"
      width="50%"
      :before-close="handleClose"
    >
      <table width="100%">
        <tr>
          <td>属性名称</td>
          <td>属性值</td>
        </tr>
        <tr height="60px">
          <td width="50%">
            <el-input
              class="el_inp"
              v-model="text"
              maxlength="10"
              placeholder="请输入内容"
              show-word-limit
              type="text"
            />
          </td>
          <td class="teshu">
            <el-input
              class="el_inp1"
              v-model="texts"
              maxlength="20"
              placeholder="请输入内容"
              show-word-limit
              type="text"
            />
            <el-button type="primary" class="btnadd" @click="jia()"
              ><el-icon><Plus /></el-icon
            ></el-button>
          </td>
        </tr>
      </table>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="add()"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import request from "../../../../utils/request";
export default {
  data() {
    return {
      text: "",
      texts: "",
      propId: "",
      flag: false,
      bianji: false,
      prodPropValues: [],
      dialogVisible: false,
      title: "新增",
      page: {
        pageSize: 10,
      },
      data: [],
      num: 0,
      option: {
        searchMenuSpan: 4,
        menuType: "button",
        border: true,
        addBtn: false,
        headerAlign: "center",
        align: "center",
        index: true,
        indexLabel: "序号",
        columnBtn: false,
        editBtn: false,
        column: [
          {
            label: "属性名称",
            prop: "propName",
            search: true,
          },
          {
            label: "属性值",
            html: true,
            formatter: (val) => {
              return val.prodPropValues.map((item) => {
                return `<span class="span">${item.propValue}</span>`;
              });
            },
          },
        ],
      },
    };
  },

  mounted() {
    this.getsetList();
  },
  methods: {
    // 新增弹框input
    jia() {
      let dom = document.querySelector(".teshu");
      var textnode = document.createElement("input");
      textnode.classList.add("el_inp2");
      dom.appendChild(textnode);
    },
    //增加和失败 的确认按钮
    add() {
      console.log(this.prodPropValues[0]);
      this.dialogVisible = false;
      if (this.title == "新增") {
        axios({
          method: "POST",
          url: "http://111.67.198.176:8111/prod/spec",
          data: {
            prodPropValues: [
              {
                valueId: 0,
                propValue: this.texts,
              },
            ],
            propName: this.text,
            t: new Date().getTime(),
          },
          headers: {
            Authorization:
              "rFOlVuCv7+9fhsOsaAUp6D+fmyxriZ/qcrRQwm9c+LZU8Wl3Ws55JGXbkiSodb3J",
          },
        });
      } else {
        let theh = this;
        console.log(theh.propId,'theh.propId')
        request({
          method: "put",
          url: "/prod/spec",
          data: { 
            t: new Date().getTime(),
            propId: this.propId,
            propName: this.text,
            prodPropValues: [
              {
                valueId: this.prodPropValues[0].valueId,
                propValue: this.texts,
                propId: null,
              },
            ],  
          },
        })
          .then((res) => {
            // console.log(res);
          })
          .catch((error) => {
            // console.log(error);
          });
      }
      setTimeout(() => {
        this.getsetList();
      }, 1000);
    },
    //添加按钮打开弹框
    addbtn() {
      this.dialogVisible = true;
      this.title = "新增";
      this.text = "";
      this.texts = "";
    },
    //编辑回显
    rowEdit(row, index) {
      this.dialogVisible = true;
      console.log(row, index);
      this.text = row.propName;
      this.texts = row.prodPropValues[0].propValue;
      this.propId = row.propId;
      this.prodPropValues = row.prodPropValues;
      this.title = "编辑";
    },
    resetChange(item) {
      this.$message.success("清空回调");
    },
    //搜索
    searchChange(params, done) {
      this.$message.success("2s后关闭锁定");
      setTimeout(() => {
        done(params);
        axios({
          method: "get",
          url: `http://111.67.198.176:8111/prod/spec/page?t=1669096500601&current=1&size=10&propName=${params.propName}`,
          headers: {
            Authorization:
              "rFOlVuCv7+9fhsOsaAUp6D+fmyxriZ/qcrRQwm9c+LZU8Wl3Ws55JGXbkiSodb3J",
          },
        }).then((res) => {
          console.log(res.data.records, "sssssssss");
          this.data = res.data.records;
        });
        this.$message.success(JSON.stringify(params));
      }, 2000);
    },
    refreshChange() {
      this.$message.success("刷新回调");
    },
    //删除
    rowDel(form, index, done) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(form, "form");
          // done(form);
          axios({
            method: "DELETE",
            url: `http://111.67.198.176:8111/prod/spec/${form.propId}`,
            headers: {
              Authorization:
                "rFOlVuCv7+9fhsOsaAUp6D+fmyxriZ/qcrRQwm9c+LZU8Wl3Ws55JGXbkiSodb3J",
            },
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          setTimeout(() => {
            this.getsetList();
          }, 1000);
        })
        .catch(() => {});
    },
    //获取总数据
    getsetList() {
      axios({
        method: "get",
        url: `http://111.67.198.176:8111/prod/spec/page?t=1669028901599&current=${this.num}&size=10`,
        headers: {
          Authorization:
            "rFOlVuCv7+9fhsOsaAUp6D+fmyxriZ/qcrRQwm9c+LZU8Wl3Ws55JGXbkiSodb3J",
        },
      })
        .then((res) => {
          console.log(res, "res");
          this.data = res.data.records;
          localStorage.setItem("dlength", JSON.stringify(res.data.total));
        })
        .catch((error) => {
          console.log(error);
        });
    },
    onLoad(page) {
      //模拟分页
      let Length = localStorage.getItem("dlength");
      this.page.total = Number(Length);
      0;
      this.num = this.page.currentPage;
      this.getsetList();
    },
    //控制弹框的显示隐藏
    handleClose() {
      this.dialogVisible = false;
    },
  },
};
</script>
<style lang="scss">
.specif_box {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}
.span {
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  background-color: rgba(2, 161, 233, 0.1);
  color: #02a1e9;
  border: solid 1px #02a1e9;
  border-radius: 5px;
}
table tr td {
  text-align: center;
  height: 40px;
  padding: 0;
  margin: 0;
}
table tr {
  background: #fff;
}
table {
  background: rgb(241, 237, 237);
  border-radius: 5px;
}
.el_inp {
  height: 45px;
  width: 98%;
}
.el_inp1 {
  height: 45px;
  width: 30%;
}
.teshu {
  text-align: left;
  padding-left: 10px;
}
.btnadd {
  height: 45px;
  margin-left: 5px;
}
.el_inp2 {
  height: 40px;
  width: 45%;
  border: solid 1px #ccc;
  margin: 5px;
}
</style>